<template>
	<div class="people" @click="noalter">
		<nav-bar class="nav-bar"></nav-bar>
		<div class="content-main">
			<Tabs>
				<Tab-pane label="成员管理" icon="person-stalker">
					<people-manager v-on:openalter="openAlter"></people-manager>
				</Tab-pane>
				<Tab-pane label="招新管理" icon="person-add">
					<add-people v-on:openadd="openAdd"></add-people>
				</Tab-pane>
			</Tabs>
		</div>
		<transition name="fade">
			<div class="alter" v-if="ifalter" @click.stop="showalter">
				<alter :msg="information"></alter>
			</div>
		</transition>
		<transition name="fade">
			<div class="alter" v-if="ifadd" @click.stop="showadd">
				<add-alter :msg="addinformation"></add-alter>
			</div>
		</transition>
	</div>
</template>

<script>
import navBar from '@/components/navBar'
import peopleManager from './people/peopleManager.vue'
import addPeople from './people/addPeople.vue'
import alter from '@/components/alterInformation.vue'
import addAlter from './people/addAlter.vue'
export default {

	name: 'people',

	data () {
		return {
			ifalter:false,
			ifadd:false,
			information:'',
			addinformation:'',
		}
	},
	methods: {
		openAlter(msg){
			this.ifalter=true
			this.information=msg
		},
		noalter(){
			this.ifalter=false
			this.ifadd=false
		},
		showalter(){
			this.ifalter=true
		},
		openAdd(msg){
			this.ifadd=true
			this.addinformation=msg
		},
		showadd(){
			this.ifadd=true
		}
	},
	components:{
		navBar,
		peopleManager,
		addPeople,
		alter,
		addAlter
	}
}
</script>

<style lang="css" scoped>
.people{
	width: 100%;
	height: 100%
}
.people .alter{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 40%;
	width: 60%;
}
</style>